

<template>
    <tm-app class="groupMembers" bgImg="f5">
        <!-- <image
            class="psa"
            style="width:750rpx;height:834rpx;top:0;left:0;right:0;z-index:1;"
            src="../../static/bg1.jpg"
            mode=""
        ></image> -->
        <view
            style="position: relative; top: 0; width: 750rpx; background: #fff"
            :style="{ height: systemInfo.statusBarHeight + 'px' }"
        ></view>
        <tm-navbar style="postion:relative;z-index:10;" :shadow="0"  color="#fff" :height="50" :margin="[0,0]" :padding="[0,0]" :fontSize="32" title="群成员">
		</tm-navbar>

        <view class="search_box d-flex a-center j-center">
            <view class="search d-flex a-center">
                <i class="tmicon tmicon-search" style="color:#ccc;font-size:30rpx;"></i>
                <input type="text" class="inp" @input="search" v-model="state.searchText" placeholder="请输入成员昵称" placeholder-style="color:#ccc;font-size:25rpx;" >
            </view>
        </view>


        <scroll-view :scroll-y="true" class="content" :style="{top:`calc(50px + 80rpx + ${systemInfo.statusBarHeight}px)`}">
            <view class="box">
				<!--
                <view class="title">
                    <view class="text d-flex a-center">
                        成员({{ state.members.length }})
                    </view>
                </view>
				-->
                <view class="heads d-flex wrap">
                        <view class="head d-flex d-c a-center j-center psr" v-for="item in state.members" @tap="goUserDetail(item.userId)">
                            <cacheimg class="head_img" :saveKey="item.userId" :src="item.userPhoto||'/static/head.jpg'"></cacheimg>
                            <rich-text :nodes="item.nodes"></rich-text>
                            <view
                                class="role w-center d-flex a-center j-center"
                                v-if="item.role === 'Owner'"
                            >
                                群主
                            </view>
                            <view class="role w-center d-flex a-center j-center" v-if="item.role==='Admin'"
                                >管理员</view>
                        </view>

                </view>
            </view>

			<!--
            <view class="box" style="margin-top:20rpx;">
                <view class="title d-flex j-between">
                    <view class="text d-flex a-center">
                        游客({{ state.visitors.length }})
                    </view>

                    <view class="desp d-flex a-center">{{vistorText}}</view>
                </view>

                <view class="heads d-flex wrap">
                        <view class="head d-flex d-c a-center j-center" v-for="item in state.visitors" @tap="goUserDetail(item.userId)">
                            <cacheimg class="head_img" :saveKey="item.userId" :src="item.userPhoto||'/static/head.jpg'"></cacheimg>
                            <rich-text :nodes="item.nodes"></rich-text>
                        </view>

                </view>
            </view>
			-->

        </scroll-view>

    </tm-app>
</template>

<script setup lang="ts">
import { ref,reactive } from "vue";
import { onReady, onShow,onLoad } from "@dcloudio/uni-app";
import { userData as userDataStore }  from '@/store/userData'
import { systemInfo as  systemInfoStore}  from '@/store/systemInfo'
import { getGroupMember,getCircleDetail } from '@/api/api'
import { imStore } from "@/store/imStore";
import { config as configStore } from "@/store/config";
import cacheimg from '@/components/cacheimg.vue'

const config: any = configStore();
const handleCheck = (bool:Boolean) => {
    config.setConfig({agreement:bool});
};
const IM_STORE = imStore();
const goUserDetail = (userId: any) => {
	let isAdd = true;
	const { type } = IM_STORE.conversation;
	//const userId = data.message.from;
	if (type === "GROUP") {
	    const { groupCustomField } =
	        IM_STORE.conversation?.groupProfile;
	    if (groupCustomField && groupCustomField.length) {
	        groupCustomField.forEach((item:any) => {
	            if (item.key === "isInteraction") {
	                //isInteraction = Number(item.value);
					isAdd = !item.value
	            }
	        });
	    }
		//根据权限判断是否可添加好友
		const myRole = IM_STORE.conversation?.groupProfile?.selfInfo.role
		if(myRole == 'Owner' || myRole == 'Admin'){
			isAdd = true
			//isInteraction = 0
		}
		const targetUser = IM_STORE.groupMembers?.find((item:any) => item.userID == userId);
		if(targetUser?.role == 'Owner' || targetUser?.role == 'Admin'){
			isAdd = true
			//isInteraction = 0
		}
	}
    uni.navigateTo({
        url: `/pages/personalCenter/personalCenter?userId=${userId}&isAdd=${isAdd}&from=group`,
    });
};

const msg:any = ref(null)

const state:any = reactive({
    searchText:'',
    visitors:[
    ],
    members:[
    ],
    all_visitors:[
    ],
    all_members:[
    ],


})



const userData:any = userDataStore();


const systemInfo:any = systemInfoStore();


const search = ()=>{

    if(!state.searchText){
        init();
        return
    }



    state.visitors = state.all_visitors.filter((item)=>{

        const str = item.userName||item.userId

        if(str.toLowerCase().search(state.searchText.toLowerCase())!==-1){
            return true;
        }else{
            return false;
        }
    })

    state.members = state.all_members.filter((item)=>{
        const str = item.userName||item.userId

        if(str.toLowerCase().search(state.searchText.toLowerCase())!==-1){
            return true;
        }else{
            return false;
        }
    })

    matchTextHighLight();

}

const init = ()=>{

    const clone_all_visitors = JSON.parse(JSON.stringify(state.all_visitors))
    const clone_all_members = JSON.parse(JSON.stringify(state.all_members))

    state.visitors = clone_all_visitors.map((item=>{
        return {
            ...item,
            nodes:`<div style="color:#999999;
                    font-size:12px;
                    width:110rpx;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    text-align: center;">${item.userName||item.userId}</div>`
        }
    }))

    state.members = clone_all_members.map((item=>{
        return {
            ...item,
            nodes:`<div style="color:#999999;
                    font-size:12px;
                    width:110rpx;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    text-align: center;">${item.userName||item.userId}</div>`
        }
    }))
}

const matchTextHighLight = ()=>{
    const reg = new RegExp(state.searchText,'gi');
    state.visitors = state.visitors.map((item:any)=>{

        const obj = {
            ...item,
        }
        const str = item.userName||item.userId;

        const nodes = `<div style="color:#999999;
                    font-size:12px;
                    width:110rpx;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    text-align: center;">${str.replace(reg,(s:any)=>{
            return `<span style="color:#23e2a6">${s}</span>`
        })}</div>`

        obj.nodes = nodes;
        return obj
    })

    state.members = state.members.map((item)=>{

        const obj = {
            ...item,
        }
        const str = item.userName||item.userId;

        const nodes = `<div style="color:#999999;
                    font-size:12px;
                    width:110rpx;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    text-align: center;">${str.replace(reg,(s:any)=>{
            return `<span style="color:#23e2a6">${s}</span>`
        })}</div>`

        obj.nodes = nodes;
        return obj
    })
}



const reqGroupMember = async(groupId:string)=>{
    const res:any = await getGroupMember({groupId})
    const {flag,data} = res;
    if(flag!==1){
        uni.showToast({
                            icon: "none",
                            title:'获取成员列表失败',
                            duration: 1500,
                    });
    }


    const members = [];
    const vistor = [];
    data.list.forEach((item:any)=>{
        if(item.role==='Tourist'){
            vistor.push(item);
        }else{
            members.push(item);
        }
    })

    state.all_visitors = vistor;
    state.all_members = members;

    init();

}

const vistorText = ref('');

const GetCircleDetail = async (groupId: string) => {
    const res: any = await getCircleDetail({ groupId });
    const { flag, data } = res;
    if (flag !== 1) {
        uni.showToast({
            icon: "none",
            title: "获取群资料失败",
            duration: 1500,
        });
        return;
    }


    vistorText.value = data.isVisitor?'游客模式已开启':'游客模式已关闭'
};






onReady(() => {
});

onLoad((option:any) => {
    if(option.groupID){
        reqGroupMember(option.groupID);
        GetCircleDetail(option.groupID);
    }


});

onShow(() => {
});
</script>

<style lang="scss" scoped>
.groupMembers{

    .search_box{
        width:750rpx;
        background:#fff;
        padding-bottom:20rpx;
        .search{
            width:690rpx;
            height:60rpx;
            border-radius:15rpx;
            background:#f5f5f5;
            padding:0 30rpx;
            .inp{
                width:570rpx;
                margin-left:20rpx;
                font-size:25rpx;
            }
        }
    }

    .content{
        position:absolute;
        width:750rpx;
        left:0;
        right:0;
        padding-top:20rpx;
        bottom: constant(safe-area-inset-bottom);
        bottom: env(safe-area-inset-bottom);
        .box{
            width:710rpx;
            padding:20rpx;
            border-radius: 20rpx;
            background-color:#fff;
            margin:0 auto;
            .title{
                position: relative;
                height:48rpx;
                &::before {
                    display: block;
                    content:'';
                    position: absolute;
                    left:0;
                    bottom:0;
                    width: 150rpx;
                    height: 26rpx;
                        background: linear-gradient(
                            270deg,
                            rgba(73, 243, 210, 0) 0%,
                            #23e2a6 100%
                        );
                        border-radius: 13rpx;
                }

                .text{
                    position: relative;
                    z-index: 10;
                    height:48rpx;
                    font-size: 34rpx;
                    font-weight: 500;
                    color:$slim-text3;
                    font-weight:bold;
                }

                .desp{
                    font-size: 24rpx;
                    font-weight: 400;
                    color: #999999;

                }
            }

            .heads{
                margin-top:20rpx;
                gap:10rpx 30rpx;
                .head{
                    width:110rpx;
                    gap:8rpx;
                }
                .head_img{
                    width: 110rpx;
                    height:110rpx;
                    box-shadow: 0px 2rpx 6rpx 0px rgba(0,0,0,0.2);
                    border: 3rpx solid #FFFFFF;
                    border-radius: 50%;
                    overflow:hidden;
                }
                .nickName{
                    color:#999999;
                    font-size:24rpx;
                    width:110rpx;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    text-align: center;
                }

                
                .role {
                    position: absolute;
                    width:90rpx;
                    height: 30rpx;
                    background: #23e2a6;
                    border-radius: 12rpx;
                    font-size: 18rpx;
                    font-family: PingFangSC-Medium, PingFang SC;
                    font-weight: 600;
                    color: #ffffff;
                    bottom:35rpx;
                }
            }
        }
    }

}
</style>
